<template>
  <el-tabs v-model="activityName" @tab-click="tabClick">
    <el-tab-pane name="quickMenu">
      <span slot="label"><i class="el-icon-menu"></i>
          快捷菜单
        <el-badge :value="quickMenu" class="item"></el-badge>
      </span>
      <app-menu ref="quickMenu" @loadSource="(page) => { updateCount('quickMenu',page)}"></app-menu>
    </el-tab-pane>
    <el-tab-pane name="runing">
      <span slot="label"><i class="el-icon-date"></i>
          进行中
        <el-badge :value="runing" class="item" type="success"></el-badge>
      </span>
      <todo-table ref="runing" activity-state="runing" @loadSource="(page) => { updateCount('runing',page)}"></todo-table>
    </el-tab-pane>
    <el-tab-pane name="finish">
       <span slot="label"><i class="el-icon-hot-water"></i>
          已完成
        <el-badge :value="finish" type="primary"></el-badge>
      </span>
      <todo-table ref="finish" activity-state="finish" @loadSource="(page) => { updateCount('finish',page)}"></todo-table>
    </el-tab-pane>
    <el-tab-pane name="cancel">
       <span slot="label"><i class="el-icon-refresh-left"></i>
          已退回
        <el-badge :value="cancel" type="warning"></el-badge>
      </span>
      <todo-table ref="cancel" activity-state="cancel" @loadSource="(page) => { updateCount('cancel',page)}"></todo-table>
    </el-tab-pane>
    <el-tab-pane name="ready">
       <span slot="label"><i class="el-icon-info"></i>
          准备中
        <el-badge :value="ready" type="info"></el-badge>
      </span>
      <todo-table ref="ready" activity-state="ready" @loadSource="(page) => { updateCount('ready',page)}"></todo-table>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import TodoTable from "@/views/system/process/todo/TodoTable";
import AppMenu from "@/views/system/app/AppMenu";
export default {
  name: "TodoManager",
  components: {AppMenu, TodoTable},
  data() {
    return {
      activityName: 'quickMenu',
      runing: 0,
      finish: 0,
      cancel: 0,
      ready: 0,
      quickMenu: 0
    }
  },
  methods: {
    updateCount(key, pageInfo) {
      const { total } = pageInfo
      this[key] = total
    },
    tabClick(e) {
      const { name } = e
      const $table = this.$refs[name]
      if ($table) {
        $table.loadSource()
      }
    }
  }
}
</script>

<style scoped>

</style>
